// 获取div元素的对象
let items = document.getElementsByClassName("item");

// 遍历并绑定事件
for (let i = 0; i < items.length; i++) {
  items[i].onclick = function () {
    // 修改当前元素的背景颜色
    // this.style.background = 'skyblue';

    // 此时i在当前作用域中没有,去外层作用域中去寻找 i=0,i=1,i=2
    items[i].style.background = 'silver'
  }
}

// # i互不影响
// { let i = 1; }
// { let i = 2; }
// { let i = 3; }
// console.log(i); //i is not defined

    // # var在全局作用域window中
    // for (var i = 0; i < items.length; i++) {
    //   items[i].onclick = function () {
    //     // # 此时items[i]找不到,向外层作用域中找,找到window的i,下标最大值2,此时items[i]为3,越界了,找不到item元素,
    //     // items[i].style.background = 'silver' // Cannot read properties of undefined (reading 'style')
    //   }
    // }

    // { var i = 1; }
    // { var i = 2; }
    // { var i = 3; }
    // console.log(i); //3
    // // i为3 var没有块级作用域,一直在全局作用域中存在
    // console.log(window.i); //3